import React, { Component } from 'react'
import Info from './ui/Info'
import { searchToObject } from '../../utils/tools'

// 获取动态路由参数数据 this.props.match.params 对象来完成获取  对象
// 获取search字符串数据 this.props.location.search  字符串，需要自行来解析为对象
// 获取state数据 this.props.location.state 对象 在hash模式中此方案可能会有刷新丢失数据的情况，在history模式下没有任何问题

class Detail extends Component {
  render() {
    console.log('动态路由参数', this.props.match.params)
    console.log('search字符串', this.props.location.search)
    console.log('state数据', this.props.location.state)

    // 可以使用es6提供一个URL对象来完成对于search字符串的解析，从而方便调用
    // const search = new URLSearchParams(this.props.location.search)
    // console.log('得到search字符串中的name字段的值', search.get('name'),search.get('age'))

    // item它是一个数组件，数组的元素1是key，元素2是value
    // for(let item of search.entries()){
    // 解构去写
    // for (let [key, value] of search.entries()) {
    //   console.log(key, value)
    // }

    console.log('search字符串', searchToObject(this.props.location.search))

    return (
      <div>
        <div>动态路由参数，必须先定义规则，才能使用，一般用于详情页面中使用 -- 它的url地址较为美观</div>
        <hr />
        <h3>动态中路由参数数据：{this.props.match.params.id}</h3>
        <Info {...this.props} />
      </div>
    )
  }
}

export default Detail
